<template>
  <div style="border: 1px #eee solid">
    <div
      v-for="(item, index) of props.dataList"
      :key="item.id"
      class="item"
      @click="toDetail(item)"
    >
      <div style="margin-right: 10px">{{ index + 1 }}</div>
      <div>{{ titleUtil.title(item.title) }}</div>
    </div>
  </div>
</template>

<script setup>
import titleUtil from '@/util/titleUtil'
import store from '@/store'
import { useRouter } from 'vue-router'

const props = defineProps({
  dataList: {
    type: Array,
    default: null
  }
})

const router = useRouter()

const toDetail = (item) => {
  console.log('传递前', item)
  store.dispatch('setBlogItem', item)
  router.push('/blogdetail')
}
</script>

<style scoped>
.item {
  height: 40px;
  display: flex;
  padding: 10px;
  line-height: 40px;
}

.item:hover {
  background: #eee;
  cursor: pointer;
}
</style>
